<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <th:block th:replace="~{layouts/common::form}"></th:block>
    <style>
        [v-cloak] {
            display: none
        }
        .icon-se .el-select-dropdown__item{
            display: inline-block;
            width: 80px;
            text-align: center;
            font-size: 20px;
        }
        .icon-se .el-select-dropdown__list{
            width: 560px;
        }
    </style>
</head>
<body>
<div id="app" v-cloak></div>
</body>

<script>
    {
        const id = "[[${id}]]"
        const {ref, reactive} = Vue;
        const route = reactive({
            type: 1,
            openType: 1,
            title: '',
            icon: '',
            route: '',
            weigh: 1,
        });
        let routeRef;
        const types = ref([]);
        const openTypes = ref([]);
        const routes = ref([]);
        const routeRule = ref({});
        const FI = baseForm.item;
        const icons = [];
        for (const key in app.icons) {
            icons.push({
                value: app.icons[key],
                label: app.icons[key]
            });
        }

        baseForm.form()
            .model("route")
            .ref('routeRef')
            .rules("routeRule")
            .addItems(
                FI.input("title", '标题').col(12, 12).required("Nihoa "),
                FI.radio("type", '路由类型').options('types'),
                FI.radio("openType", '打开类型').options('openTypes'),
                FI.select("icon", '图标').col(12, 12).options('icons').set('popper-class', 'icon-se').format(() => {
                    return "<el-icon><component :is='item.value'></component></el-icon>";
                }).afterRender((el) => {
                    el.setAttribute('id', "icon")
                    const tagEL = document.createElement("template");
                    tagEL.setAttribute('v-slot:label', '{label, value}')
                    tagEL.innerHTML = '<el-icon style="top: 2px;margin-right: 3px"><component :is="value"></component></el-icon>{{ value }}'
                    el.getElementsByTagName('el-select')[0].appendChild(tagEL)
                }),
                FI.autocomplete("route", '路由').set(':fetch-suggestions', 'queryRoute').col(12, 12),
                FI.input("weigh", '权重').col(12),
                FI.submit("submit")
            )
            .render('#app', function (formEl, rules) {
                formEl.style.maxWidth = '1000px';
                routeRule.value = rules;
            });

        sc.axios.get('/admin-base/route/get-enum-map', {name: 'openType'}).then((res) => {
            openTypes.value = res.data;
        })
        sc.axios.get('/admin-base/route/get-enum-map', {name: 'type'}).then((res) => {
            types.value = res.data;
        })
        sc.axios.get('/admin-base/route/get-routes').then((res) => {
            routes.value = res.data;
        })
        if (id) {
            sc.axios.get('/admin-base/route/get-info', {id}).then((res) => {
                for (let k in route) {
                    route[k] = res.data[k];
                }
            });
        }

        app.create('#app', {
            mounted(){
                routeRef = this.$refs.routeRef;
            },
            setup() {

                return {
                    route,
                    types,
                    openTypes,
                    routeRule,
                    icons,
                    queryRoute(value, cb) {
                        let res = [];
                        routes.value.filter(item => item.indexOf(value) > -1).forEach(item => {
                            res.push({value: item})
                        });
                        cb(res);
                    },
                    submit(){
                        routeRef.validate((valid) => {
                            if (!valid) {
                                return;
                            }
                            sc.axios.post('/admin-base/route/create', route).then((res) => {
                                if (res.code === 200) {
                                    parent.sc.message.success("操作成功");
                                    sc.closeCurrentPage();
                                } else {
                                    sc.message.error(res.message);
                                }
                            });
                        });
                    }
                }
            }
        });
    }
</script>
</html>